/*--------------------------------------------------------------
#about 关于我
--------------------------------------------------------------*/
#about {
  background: #010E1E;
}

.purple {
  background: rgba(108, 108, 229, 1);
}

.orange {
  background: #FF9B2F;
}

.sub-title {
  margin-top: 0.24rem;
}

#about-content {
  width: 12rem;
  color: #fff;
  margin: 0 auto;
  margin-top: 0.97rem;
  padding-bottom: 1.37rem;
}

#about-img img {
  width: 3.26rem;
  height: 4.28rem;
}

#about-job {
  width: 8.33rem;
  height: 0.6rem;
  background: #6C6CE5;
  border-radius: 0.1rem;
  text-align: center;
  line-height: 0.6rem;
  margin-left: 0.41rem;
}

#about-personalInformation ul li {
  width: 3.56rem;
  height: 0.6rem;
  border: 1px solid #626262;
  border-radius: 0.1rem;
  line-height: 0.6rem;
  margin-top: 0.32rem;
  margin-left: 0.41rem;
  padding-left: 0.4rem;
}

/*--------------------------------------------------------------
#个人技能
--------------------------------------------------------------*/
#skill {
  color: #fff;
}

#skill .section-title::before {
  background: rgba(255, 37, 88, 1);
}

#all-skill {
  flex-wrap: wrap;
  margin: 0.49rem 3.6rem 0.97rem 3.6rem;
}

.progress {
  width: 5.6rem;
  margin-top: 0.43rem;
}

.progress:nth-of-type(2n-1) {
  margin-right: 0.80rem;
}

.progress .bg .progress-bar {
  width: 0;
  height: 0.14rem;
  border-radius: 0.07rem;
}

.HTMLbar {
  background: #FF2558;
}

.PHPbar {
  background: #13B5B1;
}

.CSSbar {
  background: #00A0E9;
}

.WCbar {
  background: #F39800;
}

.JSbar {
  background: #C490BF;
}

.PHOTOSHOPbar {
  background: #25FFA0;
}

.progress-HTML {
  background-image: url(../images/about/形状\ 1@2x.png);
}

.progress-PHP {
  background-image: url(../images/about/形状\ 2@2x.png);

}

.progress-CSS {
  background-image: url(../images/about/形状\ 3@2x.png);

}

.progress-WC {
  background-image: url(../images/about/形状\ 4@2x.png);

}

.progress-JS {
  background-image: url(../images/about/形状\ 5@2x.png);

}

.progress-PHOTOSHOP {
  background-image: url(../images/about/形状\ 6@2x.png);
}

.progress span:first-child {
  font-size: 0.18rem;
  line-height: 0.36rem;
}

.progress span:nth-child(2) {
  font-size: 0.14rem;
  background-size: cover;
  width: 0.43rem;
  height: 0.36rem;
  line-height: 0.3rem;
  text-align: center;
}

.bg {
  width: 5.6rem;
  border-radius: 0.07rem;
  background-color: rgba(238, 238, 238, 1);
}

/*--------------------------------------------------------------
#个人经历
--------------------------------------------------------------*/
#experience {
  background-color: #010E1E;
}

#experience>div {
  flex-wrap: wrap;
}

#experience .wrapper {
  padding-top: 0.93rem;
}

#experience h4 {
  width: 100%;
  padding-bottom: 0.93rem;
  margin-left: 3.59rem;
  font-size: 0.26rem;
  color: #FFFFFF;
}

.edu-exp{
  margin-left: 4.02rem;
  margin-right: 3.6rem;
}

/*--------------------------------------------------------------
# 工作经历
--------------------------------------------------------------*/
.vertical-bar {
  width: 0.06rem;
  height: 2.6rem;
  background: #151F2B;
  margin-top: 0.39rem;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 0.19rem;
  margin-right: 0.18rem;
  position: relative;
}

.vertical-bar>div {
  width: 0.18rem;
  height: 0.18rem;
  background: #FF9B2F;
  border-radius: 50%;
  position: absolute;
  left: -0.06rem;
}

.vertical-bar .up {
  top: -0.06rem;
}

.vertical-bar .down {
  bottom: -0.06rem;
  background-color: #6C6CE5;
}

.exp {
  width: 11.58rem;
  background: #151F2B;
  border-radius: 0.1rem;
  margin-bottom: 0.63rem;
}

.time {
  width: 2.07rem;
  height: 2.33rem;
  text-align: center;
  background: #FF9B2F;
  border-radius: 0.1rem;
  margin-right: 0.33rem;
  flex-direction: column;
  justify-content: center;
  font-size: 0.2rem;
  font-weight: bold;
  color: #FFFFFF;
}

#edu-exp .time2 {
  background-color: #6C6CE5;
}

#edu-exp .span3 {
  color: #6C6CE5
}

.time p {
  margin-bottom: 0.19rem;
}

.title {
  display: inline-block;
  height: 0.52rem;
  padding: 0 0.21rem;
  line-height: 0.52rem;
  background: #010E1E;
  border-radius: 0.1rem;
  margin-top: 0.47rem;
  margin-bottom: 0.27rem;
  justify-content: space-between;
}

.title .span1 {
  text-indent: 0.21rem;
  font-size: 0.18rem;
  font-weight: 500;
  color: #FFFFFF;
}

.title .span2 {
  margin-left: 0.21rem;
  font-size: 0.16rem;
  color: #FF9B2F;
}

.detail p {
  width: 8.82rem;
  font-size: 0.14rem;
  color: #FFFFFF;
}

.work-exp{
  margin-left: 4.02rem;
  margin-right: 3.6rem;
}
/*--------------------------------------------------------------
# 项目经验
--------------------------------------------------------------*/
#work-exp .vertical-bar {
  height: 3.2rem;
}

#work-exp .time {
  height: 2.82rem;
  background-color: #1275F0;
}

#work-exp .up {
  background-color: #1275F0;
}

#work-exp .span2 {
  color: #1275F0
}

#work-exp .time2,
#work-exp .down {
  background-color: #F97B8B
}

#work-exp .span3 {
  color: #F97B8B
}

#product-exp .time,
#product-exp .up {
  background-color: #54D891
}

#product-exp .span2 {
  color: #54D891
}

#product-exp .time2,
#product-exp .down {
  background-color: #65CDFF
}

#product-exp .span3 {
  color: #65CDFF
}

.product-exp{
  margin-left: 4.02rem;
  margin-right: 3.6rem;
}